{% extends "base.html" %}
{% block content %}
<div class="container py-5">
  <h2 class="mb-4">Quiz Results: {{ attempt.quiz.title }}</h2>

  <div class="mb-4">
    <p><strong>Your Score:</strong> {{ attempt.score }} / {{ attempt.max_score }}</p>
    {% if attempt.max_score %}
      <p><strong>Percentage:</strong> {{ attempt.score|floatformat:2 }} / {{ attempt.max_score }} = 
        {{ attempt.score|divisibleby:attempt.max_score|floatformat:2 }}%</p>
    {% endif %}
    <p><strong>Started:</strong> {{ attempt.started_at|date:"M d, Y H:i" }}</p>
    <p><strong>Finished:</strong> {{ attempt.finished_at|date:"M d, Y H:i" }}</p>
  </div>

  <hr>

  {% for answer in attempt.answers.all %}
    <div class="card mb-3 {% if answer.is_correct %}border-success{% else %}border-danger{% endif %}">
      <div class="card-body">
        <h5 class="card-title">
          Q{{ forloop.counter }}. {{ answer.question.text }}
        </h5>

        <ul class="list-group mb-2">
          {% for choice in answer.question.choices.all %}
            <li class="list-group-item 
              {% if choice.id == answer.choice.id %}
                {% if answer.is_correct %}
                  list-group-item-success
                {% else %}
                  list-group-item-danger
                {% endif %}
              {% elif choice.is_correct %}
                list-group-item-success
              {% endif %}
            ">
              {{ choice.text }}
              {% if choice.id == answer.choice.id %}
                <span class="badge bg-primary float-end">Your Answer</span>
              {% elif choice.is_correct %}
                <span class="badge bg-success float-end">Correct</span>
              {% endif %}
            </li>
          {% endfor %}
        </ul>

        {% if not answer.is_correct %}
          <p class="text-danger"><strong>Explanation:</strong> {{ answer.question.explanation }}</p>
        {% endif %}
      </div>
    </div>
  {% endfor %}

  <div class="mt-4">
    <a href="{% url 'quizzes:history' %}" class="btn btn-secondary">← Back to History</a>
  </div>
</div>
{% endblock %}